<template>
	<view ref="QS-Grids" class="QS-Grids" :class="getClass">
		<block v-if="mode === 'swiper'">
			<swiper 
			:indicator-dots="indicatorDots"
			:indicator-color="indicatorColor"
			:indicator-active-color="indicatorActiveColor"
			:autoplay="autoplay"
			:interval="interval"
			
			:previous-margin="previousMargin"
			:next-margin="nextMargin"
			:circular="circular" 
			:current="swiperCurrent"
			:duration="Number(duration)"
			@animationfinish="swiperChange"
			
			:style="{ height: ((swiperHieght) + getIndicatorDotsHieght) + 'px' }">
				<swiper-item v-for="(item, index) in grids" :key="index">
						<QSGrid 
						ref="QS_Grid"
						:useQSAnimation="useQSAnimation"
						:animationType="animationType"
						:grids="item" 
						:hideText="hideText"
						:gridWidth="getWidth" 
						:padding="padding" 
						:paddingRow="paddingRow"
						:paddingCol="paddingCol"
						:iconSizeScale="iconSizeScale"
						:gridTextColor="gridTextColor"
						:gridTextSize="gridTextSize"
						:gridTextMarginTop="gridTextMarginTop" 
						:props="props"
						:gridOutline="gridOutline"
						:gridPadding="gridPadding"
						:iconBorderRadius="iconBorderRadius"
						:iconHeight="iconHeight"
						:iconMinHeight="iconMinHeight"
						:iconWidth="iconWidth"
						:gridPaddingTop="gridPaddingTop"
						:gridPaddingBottom="gridPaddingBottom"
						:gridPaddingLeft="gridPaddingLeft"
						:gridPaddingRight="gridPaddingRight"
						:badgeRight="badgeRight"
						:badgeTop="badgeTop"
						:badgeLeft="badgeLeft"
						:badgeBottom="badgeBottom"
						:gridMinHeight="gridMinHeight"
						:ellipsis="ellipsis"
						@click="_click($event, index)"></QSGrid>
				</swiper-item>
			</swiper>
		</block>
		<block v-else>
			<QSGrid
			:useQSAnimation="useQSAnimation"
			:animationType="animationType"
			:grids="grids" 
			:hideText="hideText"
			:gridWidth="getWidth" 
			:paddingRow="paddingRow"
			:paddingCol="paddingCol"
			:iconSizeScale="iconSizeScale"
			:gridTextColor="gridTextColor"
			:gridTextSize="gridTextSize"
			:iconMinHeight="iconMinHeight"
			:gridTextMarginTop="gridTextMarginTop" 
			:props="props"
			:gridOutline="gridOutline"
			:gridPadding="gridPadding"
			:iconBorderRadius="iconBorderRadius"
			:iconHeight="iconHeight"
			:iconWidth="iconWidth"
			:gridPaddingTop="gridPaddingTop"
			:gridPaddingBottom="gridPaddingBottom"
			:gridPaddingLeft="gridPaddingLeft"
			:gridPaddingRight="gridPaddingRight"
			:badgeRight="badgeRight"
			:badgeTop="badgeTop"
			:badgeLeft="badgeLeft"
			:badgeBottom="badgeBottom"
			:gridMinHeight="gridMinHeight"
			:ellipsis="ellipsis"
			@click="_click($event)"></QSGrid>
		</block>
	</view>
</template>

<script>
	import QSGrid from './QS-Grid.vue'
	import QSComponentMixin from '../../mixins/QS-Components-Mixin.js';
	import nProps from './props.js';
	import rpxUnit2px from '../../js/functions/rpxUnit2px.js';
	const QSComponentMixinRes = QSComponentMixin({ 
		componentType: 'QS-Grids',
		nodeName: '.QS-Grids'
	});
	
	let props;
	try{
		props = require('@/QS-UI-CONFIG/components/QS-Grids/js/props.js');
	}catch(e){
		//TODO handle the exception
		props = {};
	}
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom')
	// #endif
	export default {
		mixins: [QSComponentMixinRes.mixin],
		components: {QSGrid},
		props:{
			// #ifdef MP-ALIPAY
			...QSComponentMixinRes.props,
			// #endif
			...nProps,
			...props
		},
		computed: {
			getWidth() {
				return (this.componentWidth - (rpxUnit2px(this.paddingRow)*2))/this.row;
			},
			getIndicatorDotsHieght() {
				return Number(this.indicatorDotsHieght);
			}
		},
		watch: {
			gridsData(n) {
				this.setData(n);
			},
			mode() {
				this.setData(this.gridsData);
			},
			col() {
				this.setData(this.gridsData);
			},
			row() {
				this.setData(this.gridsData);
			}
		},
		data() {
			return {
				grids: [],
				singleLenth: 0,
				componentWidth: 0,
				swiperHieght: 200,
				swiperCurrent: this.defCurrent
			}
		},
		mounted() {
			// #ifndef APP-NVUE
			this.countInfo()
			// #endif
			this.setData(this.gridsData);
		},
		methods: {
			swiperChange({detail: { current }}) {
				this.swiperCurrent = current;
			},
			countInfo() {
				// #ifdef APP-NVUE
				dom.getComponentRect(this.$refs['QS-Grids'], option => {
					// console.log('获取QS-Grids布局信息成功: ' + JSON.stringify(option))
					if(option.size) this.componentWidth = option.size.width;
					// this.$nextTick(()=>{
						this.countGridInfo();
					// })
				})
				// #endif
				// #ifndef APP-NVUE
				let view
				// #ifndef MP-BAIDU || MP-ALIPAY
				view = uni.createSelectorQuery().in(this)
				// #endif
				// #ifdef MP-BAIDU || MP-ALIPAY
				view = uni.createSelectorQuery()
				// #endif
				view.select('.QS-Grids').fields({
					size: true
				})
				view.exec(res=>{
					// console.log('获取节点信息成功:' + JSON.stringify(res))
					if(res[0] && res[0].width) {
						this.componentWidth = res[0].width
						// this.$nextTick(()=>{
							this.countGridInfo();
						// })
					}else{
						console.log('获取节点信息失败!!')
					}
				})
				// #endif
			},
			countGridInfo() {
				if(this.mode === 'swiper') {
					this.$nextTick(()=>{
						setTimeout(()=>{
							const refs = this.$refs.QS_Grid;
							if(!refs) return;
							const ref = refs[0];
							if(!ref) return;
							const fn = ref.countGridInfo;
							if(!fn || typeof fn !== 'function') return;
							fn(res=>{
								this.swiperHieght = res.height
							})
						}, 100)
					})
				}
			},
			setData(arr) {
				this.setGrids(arr);
			},
			setGrids(grids) {
				const arr = JSON.parse(JSON.stringify(grids))
				let newArr = [];
				
				if(this.mode === 'swiper') {
					const singleLenth = Number(this.row) * Number(this.col);
					if(singleLenth < 0) {
						console.log('行数与列数不正确');
						return;
					}
					this.singleLenth = singleLenth;
					
					const totalPage = Math.ceil(arr.length / singleLenth);
					
					for(let i = 0; i < totalPage; i++) {
						const page = [];
						
						for(let j = 0; j < singleLenth; j++) {
							const c = i * singleLenth + j;
							if(c > arr.length - 1) break;
							page.push(arr[c]);
						}
						newArr.push(page);
					}
				}else{
					newArr = arr
				}
				
				this.grids = Object.freeze(newArr);
				this.$nextTick(()=>{
					this.countInfo()
					// this.countGridInfo();	
				})		
			},
			_click(index, pageNum) {
				console.log('宫格组件 grids接受点击事件')
				let count;
				if(pageNum !== undefined) {
					count = this.singleLenth * pageNum + index;
				}else{
					count = index;
				}
				this.$emit('gridClick', count)
			}
		}
	}
</script>

<style scoped>
	.QS-Grids{
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		position: relative;
	}
</style>
